<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box</title>
    <style>
        .box1 {
            border: 1px solid black;   /*边框*/
            width: 500px;    /*元素宽度*/
            height: 300px;
            /*padding: 10px 20px 30px 40px;  !*内边距，方向为上右下左*!*/
            /*padding: 10px 20px;   !*上下10，左右20px*!*/
            padding-left: 20px;    /*左*/
            padding-right: 30px;   /*右*/
            padding-top: 10px;     /*上*/
            padding-bottom: 40px;  /*下*/
            margin: 20px;   /*外边距，4个方向全是20px*/
        }
        .box2 {
            /*background: lightgray;*/
            background-image: url("https://www.easyicon.net/api/resizeApi.php?id=1233824&size=32");
            /*background-repeat: no-repeat;   !*不重复*!*/
            /*background-repeat: repeat-x;    !*水平重复*!*/
            /*background-repeat: repeat-y;      !*纵向重复*!*/
            width: 500px;
            height: 300px;
            border-top: 1px solid black;
            border-left: 1px dashed purple;
            border-right: 1px dotted green;
        }
        .c1 {
            font-family: Serif;
            font-size: 18px;
            font-weight: bold;    /*加粗*/
            font-style: italic;   /*斜体*/
        }
        .c2 {
            font-family: monospace;
            /*text-align: center;     !*居中*!*/
            text-align: right;      /*右对齐*/
            text-decoration: underline;   /*下划线*/
        }
        .c3 {
            border: 1px solid black;
            height: 50px;           /*c3的高度*/
            text-align: center;
            line-height: 50px;      /*文字的行高，文字默认出现在一行中间位置*/
        }
    </style>
</head>
<body>
<div class="c3">达内云计算 1909</div>
<div class="c1">box BOX 你好</div>
<div class="c2">box BOX 你好</div>
<div class="box2">box2 BOX</div>
<div class="box1">这是一个div,这是一个div</div>
</body>
</html>